{extend name="base" /}
<!-- page specific plugin styles -->
{block name="plugin-styles"}{/block}
<!-- inline styles related to this page -->
{block name="inline-styles"}
<link rel="stylesheet" href="/static/ace/assets/css/bootstrap-datepicker3.min.css" />
{/block}
<!-- breadcrumb -->
{block name="breadcrumbs"}
<ul class="breadcrumb">
    <li>
        <i class="ace-icon fa fa-home home-icon"></i>
        <a href="{:url('Index/index')}">首页</a>
    </li>
    <li class="active">团队奖励返利</li>
</ul>
<!-- /.breadcrumb -->
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page-header">
    <h1>
        返利记录
    </h1>
</div>
<!-- /.page-header -->
<div class="clearfix tableTools-container">
    <form class="pull-left form-inline" id='searchForm'>
        <div class="form-group">
                    <div class="input-daterange input-group"  style="width:300px" >
                        <input type="text" class="input-sm form-control" id='startTime' name="startTime" data-date-format="yyyy-mm" placeholder="开始时间" autocomplete = "off"/>
                        <span class="input-group-addon"><i class="fa fa-exchange"></i></span>
                        <input type="text" class="input-sm form-control"  id='endTime'name="endTime" data-date-format="yyyy-mm" placeholder="结束时间" autocomplete = "off"/>
                    </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">关键字</span>
                <input type="text" class="form-control input-sm col-sm-4" name="keywords" placeholder="请输入手机号,代理名称,用户id">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" for="ispay">结算状态</label>
            <select class="form-control input-sm" name="status" id="">
                <option value="">全部</option>
                <option value="0" >未结算</option>
                <option value="1" >已结算</option>
               
            </select>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-xs btn-primary" id='searchTable'>搜索</button>
            <button type="reset" class="btn btn-xs btn-primary" >重置</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </form>
</div>
<div class="table-responsive">
    <table class="table table-bordered" id="DynamicTable"></table>
</div>
<!-- /.table-responsive -->


{/block}
<!-- PAGE CONTENT ENDS -->
<!-- page specific plugin scripts -->
{block name="plugin-scripts"}
<script src="/static/ace/assets/js/jquery.dataTables.min.js"></script>
<script src="/static/ace/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="/static/ace/assets/js/moment.min.js"></script>
<script src="/static/ace/assets/js/bootstrap-datepicker.min.js"></script>
 <script src="/static/ace/assets/js/daterangepicker.min.js"></script>
 <script src="/static/ace/assets/js/bootstrap-datetimepicker.min.js"></script>
{/block}
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script type="text/javascript">
var myTable ;
    jQuery(function($) {
    	myTable = 
        $('#DynamicTable')
        .wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
        .DataTable({
            "autoWidth": false, //智能列宽处理
            "deferRender": true,    //延迟渲染以获得额外的初始化速度
            "info": true,   //表信息显示
            "lengthChange": false,  //更改每页记录数
            "ordering": false,  //排序功能
            "paging": true, //启用或禁用表分页
            "processing": false,    //处理指标
            // "scrollX": false,    //水平滚动
            // "scrollY": false,    //垂直滚动
            "searching": false, //搜索功能
            "serverSide": true, //服务器端处理模式
            "stateSave": false, //状态保存(页面重新加载时恢复表状态)
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Chinese.json"
            },
            "ajax": {
                "url": "/admin/reward/month_reward_rs",
                "type": "Post",
                "data": function (d) {
                    d.status = $("select[name=status]").val();
                    d.start_date = $("input[name=startTime]").val();
                    d.end_date = $("input[name=endTime]").val();
                    d.keywords = $("input[name=keywords]").val();
                },
                "dataSrc": function (json) {
                    return json.data;
                }
            },
            "columns": [{
                "title": "ID",
                "data": "id"
            }, {
                "title": "代理名称",
                "data": "name"
            },{
                "title": "总购买个数",
                "data": "num"
            },{
                "title": "奖励月份",
                "data": "month"
            },{
                "title": "添加时间",
                "data": "cdate"
            },{
                "title": "结算时间",
                "data": "settlement_date"
            }, {
                "title": "结算金额",
                "data": "money"
            },  {
                "title": "结算状态",
                "data": "status"
            }],
            
            "columnDefs": [{
                "className": "text-center",
                "targets": [0,1,2,3,4,5,6,7]
            },{
                "render": function (data, type, row, meta) {
                    return '<a href="{:url('agent/detail')}?mid='+row.mid+'" target="  _blank">'+row.name+'</a>';;
                },
                "targets": 1  
            },
            {
                "render": function (data, type, row, meta) {
                    if (row.status == 0) {
                        return '-';
                    } else {
                        return data;
                    }
                },
                "targets": 5
            },
            {
            	"render": function (data, type, row, meta) {
                    if (data == 0) {
                        return '<span class="label arrowed arrowed-right label-warning">未结算</span>';
                    } else if (data == 1) {
                        return '<span class="label arrowed arrowed-right label-success">已结算</span>';
                    }
                },
                "targets": 7
            }
            ],
            "initComplete": function( settings, json ) {
                $("#DynamicTable").prev(".row").remove();
                //add tooltip for small view
                $('[data-rel="tooltip"]').tooltip();
            }
        });
        
        $("#searchTable").click(function () {
            myTable.draw();
        });
        
    });

    $('#startTime').datepicker({
        format: 'yyyy-mm',
        weekStart: 1,
        autoclose: true,
        startView: 3,
        maxViewMode: 1,
        minViewMode:1,
        forceParse: false,
        language: 'zh-CN'
    });
    $('#endTime').datepicker({
        format: 'yyyy-mm',
        weekStart: 1,
        autoclose: true,
        startView: 3,
        maxViewMode: 1,
        minViewMode:1,
        forceParse: false,
        language: 'zh-CN'
    });
    
</script>
{/block}